// 接口地址：http://cba.itlike.com/public/index.php?s=/api/page/detail
// 请求方式：get

// // 如果放在这里，轮播图初始化时，数据还没请求回来，模板渲染就没有东西，不合适
// swiper初始化代码（思考：在Vue中应该在哪里初始化）

// 为什么放这个不行，但是放mounted里面又可以呢？

// new Swiper 第一个参数 是 轮播图的容器盒子 .swiper

// 放在这里，#app 容器还是原本的 html，没有经过 Vue 的编译
// 因为 Vue 在实例化、渲染完成后，会对 #app 的内容做一个替换

// 所以，这里拿到的  .swiper 不是 Vue 渲染完成 最终显示在页面上的 .swiper 盒子

// 验证上述结论：
// 在Vue渲染之前拿的 .swiper 容器 DOM
const swiper1 = document.querySelector('.swiper')
// 如果上面的 swiper1 和 mounted 中的 swiper2 不是同一个DOM对象，说明在这里拿到的 轮播图盒子 不是最终在显示在页面上的
// 因为，一旦页面渲染完成，重复去获取页面DOM的时候，都是同一个DOM

// const mySwiper = new Swiper(".swiper", {
//   speed: 1000,
//   loop: true,
//   autoplay: {
//     disableOnInteraction: false,
//     delay: 2000,
//   },
//   pagination: {
//     el: ".swiper-pagination",
//   },
//   centeredSlides: true,
//   observer: true, //修改swiper自己或子元素时，自动初始化swiper
//   observeParents: true, //修改swiper的父元素时，自动初始化swiper
//   observerUpdate: true,
// });




const app = new Vue({
  el: '#app',
  data: {
    swiperList: [], // 轮播数据
    navList: [], // 导航数据
    goodsList: [] // 商品数据
  },
  async created () {

    console.log('created...');

    const res = await axios({
      method: 'GET',
      url: 'http://cba.itlike.com/public/index.php?s=/api/page/detail'
    })

    // 执行到这里，请求响应才回来
    console.log(res);

    const items = res.data.data.pageData.items

    // 找导航数据
    // 去 items 中找 type 为 navBar 的那个元素
    // 为什么不用索引呢？因为后端给你的数组的元素的顺序有可能在未来发生变化，为了保证前端代码健壮性，所以，我们根据唯一标识（type）去找元素更靠谱
    // 用什么方法找数组中匹配条件的元素呢？find

    this.navList = items.find(v => v.type === 'navBar').data

    // 找商品数据
    this.goodsList = items.find(v => v.type === 'goods').data

    // 找轮播图数据
    this.swiperList = items.find(v => v.type === 'banner').data
    console.log('==== 这里 swiperList 数据才赋值成功====');

    // // 数据改变，驱动视图更新，视图更新是异步的，所以，轮播图的初始化要等DOM更新完后再去做

    this.$nextTick(() => {
      
      const mySwiper = new Swiper(".swiper", {
        speed: 1000,
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 2000,
        },
        pagination: {
          el: ".swiper-pagination",
        },
        centeredSlides: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        observerUpdate: true,
      });

    })

  },
  mounted () {
    console.log('mounted...');

    const swiper2 = document.querySelector('.swiper')

    console.log(swiper1 === swiper2, 'swiper1 === swiper2');

    // const mySwiper = new Swiper(".swiper", {
    //   speed: 1000,
    //   loop: true,
    //   autoplay: {
    //     disableOnInteraction: false,
    //     delay: 2000,
    //   },
    //   pagination: {
    //     el: ".swiper-pagination",
    //   },
    //   centeredSlides: true,
    //   observer: true, //修改swiper自己或子元素时，自动初始化swiper
    //   observeParents: true, //修改swiper的父元素时，自动初始化swiper
    //   observerUpdate: true,
    // });

    console.log('=====轮播图已经初始化完成了=====');
  }
})